<template>
	<view class="wrapper">
    <view class="contact">
      <view class="mobile" @click="callPhone">
        <text class="text">客服电话:</text>
        <text class="info">{{ data.mobile }}</text>
        <text class="tip">(点击拨打)</text>
      </view>
      <view class="wx">
        <text class="text">客服微信:</text>
        <text class="info">{{ data.wx }}</text>
      </view>
      <!--  #ifdef MP-WEIXIN -->
      <button class="btn" type="default" open-type="contact">点击联系客服</button>
      <!--  #endif -->
    </view>
  </view>
</template>

<script>
import base64 from '../../util/base64'
import Service from '../../api/service'
const serviceModel = new Service()

	export default {
		data() {
			return {
			  data: {}
			}
		},
		onLoad() {
      this.fetch()
		},
		methods: {
      fetch() {
        serviceModel.service().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.data = data
          console.log(data)
        })
      },
      callPhone() {
        uni.makePhoneCall({
          phoneNumber: this.data.mobile,
          success: () => {
            console.log('拨打电话成功')
          },
          fail: () => {
            console.log('拨打电话失败')
          }
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.btn {
  font-size: 24rpx;
  color: red;
  margin-top: 20px;
}
.wrapper {
  background: $background_color;
  padding: 20rpx;
  font-size: 24rpx;
  .contact {
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
    .mobile, .wx {
      height: 30px;
      text {
        margin-right: 10rpx;
        &.info {
          color: red;
        }
        &.tip {
          color: #999;
        }
      }
    }
  }
}
</style>
